<template>
  <div class="w-full h-full">
    <div class="w-full h-full cursor-pointer" @click="previewVisible = true">
      <slot />
    </div>
    <el-dialog
      align-center
      append-to-body
      title="预览"
      v-model="previewVisible"
      :width="width + 'px'"
    >
      <div ref="scrollRef" class="h-full max-h-[70vh] w-full overflow-y-auto">
        <div class="flex justify-center items-center pb-[20px]">
          <el-image lazy class="w-min-[270px] w-full p-[10px]" :src="netPath(src)" fit="contain">
            <template #error>
              <div class="image-slot">
                <el-icon><CarNoImage /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { netPath } from "@/utils/common";
withDefaults(
  defineProps<{
    src: string;
    width?: number;
  }>(),
  {
    width: 440
  }
);
const previewVisible = ref(false);
const scrollRef = ref();
watch(
  () => previewVisible.value,
  () => {
    nextTick(() => {
      if (scrollRef.value) {
        scrollRef.value.scrollTop = 0;
      }
    });
  }
);
</script>
